<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap巨幕与旋转特效</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>
<style>
    main {
        margin: 1%;
        padding: 1%;
    }
</style>

<body>

    <main>
        <div class="jumbotron">
            <h1 class="display-4">标题</h1>
            <span class="lead">副标题副标题副标题副标题副标题副标题副标题</span>
            <hr class="my-4">
            <span>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</span>
            <button class="btn btn-success btn-lg mt-4 ml-5">查看更多</button>
        </div>
        
        <div class="card">
            <div class="card-body">
                <button id="get" class="btn btn-success">
                    
                    点击详情
                </button>
            </div>
        </div>
    </main>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script>
        let getButton = $('#get');
        getButton.click(()=>{
            console.log(getButton);
            getButton.addClass('btn btn-danger');
            getButton.attr('disabled', 'disabled');
            const template = `<span class="spinner-border spinner-border-sm"></span>点击详情`;
            getButton.html(template);
            setTimeout(()=>{
                getButton.addClass('btn-success');
                getButton.removeClass('btn-danger');
                getButton.html('点击详情');
                getButton.removeAttr('disabled');
            }, 2000);

        })
    </script>
</body>

</html>